<template>
    <rx-dialog @handOk="handleCompleteCheck" @cancel="closeWindow" :oktext="i18n('taskCheck.btnAssign','提交')" order="buttom" btnalign="center">
        <template #toolbar>
            <a-button @click="temporaryOpinion">{{i18n('taskCheck.btnProvisional','暂存意见')}}</a-button>
        </template>
        <rx-fit>
            <div style="height:100%;width:100%;padding:5px;">
                <div class="opinion-common">

                    <div class="opinion">
                        <div>{{i18n('taskCheck.opinion','意见')}}:
                            <a-radio-group  v-if="showOpinion()"  v-model="checkType" @change="checkTypeChange">
                                <a-radio :value="item.value" :key="item.value" v-for="item in checkTypes">
                                    {{ $i18(item.text) }}
                                </a-radio>
                            </a-radio-group>

                         </div>
                        <div @click.stop="opinionShow=!opinionShow"><my-icon type="iconxinzeng"></my-icon>{{i18n('taskCheck.insertOpinion','插入常用意见')}}</div>
                    </div>
                    <!--插入意见弹窗 -->
                    <div class="opinion-parenthesis" id="opinionShow" v-show="opinionShow">
                           <div class="opinion-parenthesis-triangle"></div>
                            <div style="position: relative">
                                <ul class="opinion-parenthesis-list">
                                    <li v-for="item in commonOpinions" :value="item.opText" :label="item.opText">
                                        <my-icon type="iconoffline" @click.stop="closeOpinion(item)"></my-icon>
                                        <div @click="handleChange(item.opText)">{{ item.opText }}</div>
                                    </li>
                                </ul>
                                <div class="opinion-parenthesis-add" @click.stop="addOpinionShow =!addOpinionShow"><my-icon type="iconxinzeng"></my-icon>{{i18n('taskCheck.newOpinion','新建常用意见')}}</div>
                                <!--新建常用意见弹窗-->
                                <div class="opinion-common-add" v-show="addOpinionShow" >
                                    <div style="position: relative">
                                        <div class="opinion-common-add-triangle"></div>
                                        <div style="margin: 15px 15px 0px 15px;">{{i18n('taskCheck.commonOpinion','常用意见')}}</div>
                                        <a-textarea :placeholder="i18n('taskCheck.commonOpinionDesc','请输入意见作为常用意见')" v-model="addOpinion" style="height:60px;margin:15px;width: 309px;" ></a-textarea>
                                        <div class="opinion-common-add-button">
                                            <a-button @click="addOpinionShow = false">{{$ti18('rxForm.cancelBtn','取消')}}</a-button>
                                            <a-button @click="saveOpinion" type="primary">{{$ti18('rxForm.saveBtn','保存')}}</a-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                    <rx-tribute ref="rxtribute" style="height:100px;margin-top: 10px"></rx-tribute>
                </div>

                <div  class="bpm-more-common-executors" v-show="canShowNextTask()">
                    <bpm-task-executors style="flex: 1" ref="taskExecutors" :nodeExecutors="nodeExecutors"
                                        :task-config="taskConfig"
                                        :processConfig="$parent.processConfig">

                    </bpm-task-executors>
                </div>
               <!--  更多收起  -->
                <div class="bpm-more-common" v-show="showMoreOptions">
                    <a-collapse v-model="activeKeys">
                        <a-collapse-panel key="1" :header="i18n('taskCheck.moreOptions','更多选项')">
                            <a-form-model :rules="rules"  :model="form"  ref="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-form-model-item :label="i18n('taskCheck.attachment','附件')" >
                                    <rx-attach-component v-model="fileList" ></rx-attach-component>
                                </a-form-model-item>
                                <a-form-model-item :label="i18n('taskCheck.cc','抄送')">
                                    <rx-user-component v-model="copyUsers" :isAccount="true"
                                                       :single="false"></rx-user-component>
                                </a-form-model-item>
                                <a-form-model-item :label="i18n('taskCheck.assoProcess','关联流程')">
                                    <rx-text-list v-model="relInsts"
                                                  :showclose="true"
                                                  :readonly="false"
                                                  valuefield="id" textfield="name"
                                                  @click="selectBpmInst()">
                                        <a-icon type="ellipsis"/>
                                    </rx-text-list>
                                </a-form-model-item>

                            </a-form-model>
                        </a-collapse-panel>
                    </a-collapse>
                </div>
            </div>
        </rx-fit>
    </rx-dialog>
</template>
<script>
import {Dialog, RxDialog, Util, RxFit, RxUserComponent, RxAttachComponent, RxTextList} from '@lowcode/jpaas-common-lib'
import BpmtaskApi from '@/api/bpm/core/bpmTask'
import BpmPublicApi from '@/api/bpm/core/BpmPublicApi'
import BpmOpinionLibApi from "@/api/bpm/core/bpmOpinionLib";
import BpmTaskExecutors from "./BpmTaskExecutors";
import BpmMyEvents from "./BpmMyEvents";
import RxTribute from "../../share/rx-tribute.vue"

export default {
    name: 'bpm-task-check',
    components: {
        RxUserComponent,
        BpmTaskExecutors,
        RxAttachComponent,
        RxFit,
        RxDialog,
        BpmMyEvents,
        RxTextList,
        RxTribute
    },
    props: {
        layerid: String,
        lydata: Object,
        destroy: Function,
        taskId: {
            type: String,
            required: true
        },
        formJson: String,
        systemHand: Boolean,
        opinionObj: {
            type: Object,
            default: {
                name: "",
                value: ""
            }
        },
        taskConfig: {
            type: Object
        },
        //显示更多选项。
        showMoreOptions:{
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            labelCol: {span: 3},
            wrapperCol: {span: 9},

            checkType: 'AGREE',
            msgTypes: [],
            copyUsers: [],
            opinionName: "",
            value: undefined,
            commonOpinions: [],
            fileList: [],
            temporaryOpinionObj: {},
            relInsts: [],
            advanced: false,
            checkTypes: [{text:this.i18n('taskCheck.pass','通过'),value:"AGREE"},
                { text:this.i18n('taskCheck.noPass','不通过'),value:"REFUSE"}],
            rules: {
                opinion: [
                    { required: true, message: this.i18n('taskCheck.opRequired','意见必填'), trigger: 'blur' },
                    { type:"string", max: 500, message: this.i18n('taskCheck.opLength','长度不能大于500字符'), trigger: 'blur' },
                ]
            },
            form:{
                opinion:""
            },
            opinionShow:false,
            addOpinionShow:false,
            addOpinion:'',
            activeKeys:'0',
            //执行人
            nodeExecutors: [],
        }
    },
    created() {
        this.opinion = this.lydata.opinionObj.value;
        this.opinionName = this.lydata.opinionObj.name;

        this.getTemporaryOpinion();

        this.getCommonUserOpinions();

        //初始化用户数据。
        this.initUser();
        // 初始化意见
        this.initCheckTypes();

        this.rules.opinion[0].required=this.checkType!="AGREE";
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"bpmTask",key);
        },
        initUser(){
            BpmtaskApi.getTaskFlowNodesExecutors(this.taskId, 'AGREE', JSON.parse(this.formJson),this.systemHand).then(res => {
                this.nodeExecutors = res;
            })
        },
        checkTypeChange(e){
            BpmtaskApi.getTaskFlowNodesExecutors(this.taskId,e.target.value,JSON.parse(this.formJson),this.systemHand).then(res=>{
              this.nodeExecutors=res;
            })
        },
        //显示高级选择项
        toggleAdvanced() {
            this.advanced = !this.advanced;
        },
        handleCompleteCheck(e) {
            let self = this;
            var ctl = this.$refs.taskExecutors;
            var rxtribute = this.$refs.rxtribute;
            //抄送用户
            let copyAccounts = this.getCopyUserAccounts();
            let noticeTypes = this.msgTypes.join(",");
            let nodeUserMap = ctl.getNodeUserMap();
            let destNodeId = ctl.getDestNodeId();
            let cmd = {
                taskId: this.taskId,
                checkType: this.checkType,
                opinion: rxtribute.getOpinion(),
                msgTypes: noticeTypes,
                copyUserAccounts: copyAccounts,
                linkupAccounts: rxtribute.getLinkup(),
                nodeExecutors: nodeUserMap,
                formJson: self.formJson,
                systemHand: self.systemHand,
                opinionName: self.opinionName,
                opFiles: JSON.stringify(self.fileList),
                relInsts: JSON.stringify(self.relInsts)
            }
            //设置目标节点。
            if (destNodeId) {
                cmd.destNodeId = destNodeId;
            }

            debugger;
            //配置意见必填。
            if(this.taskConfig.switchOptions.includes("opinionRequired")){
                let opinion=rxtribute.getOpinion();
                if(opinion){
                    opinion=opinion.trim();
                }
                if(!opinion){
                    let message=this.i18n('form.tipOpinion','请填写审批意见!')
                    this.$message.warn(message);
                    e.loading = false;
                    return;
                }
            }

            BpmtaskApi.checkComplete(cmd).then(resp => {

                e.loading = false;
                if (self.$parent.processConfig.formType == 'online') {
                    self.$parent.$refs.rxForms.afterSubmit(resp, JSON.parse(self.formJson));
                }
                if(resp.data && resp.data.async){
                    Util.closeWindow(self, 'async');
                }
                else if (resp.success) {
                    Util.closeWindow(self, 'ok');
                }
            })

        },

        /**
         * 获取抄送用户。
         * @returns {string}
         */
        getCopyUserAccounts() {
            var accounts = [];
            if (this.copyUsers && this.copyUsers.length > 0) {
                this.copyUsers.forEach(item => {
                    accounts.push(item.account);
                })
            }
            return accounts.join(",");
        },
        closeWindow() {
            Util.closeWindow(this, 'cancel')
        },
        saveOpinion() {
            var self = this;
            if(!this.addOpinion){
                this.$message.warning(self.i18n('taskCheck.sureToClear','请填写需要保存的常用意见!'));
                return;
            }
            BpmOpinionLibApi.save({opText: this.addOpinion}).then(res => {
                if (res.success) {
                    this.getCommonUserOpinions();
                    this.addOpinion ="";
                    this.addOpinionShow =false

                }
            });
        },
        closeOpinion(opinion) {
            let self_ = this;
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips','操作提示'),
                zIndex: 9999,
                content: self_.i18n('taskCheck.sureToClear','确定要删除此条意见吗？'),
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                onOk() {
                    BpmOpinionLibApi.del({ids: opinion.opId}).then(res => {
                        self_.getCommonUserOpinions();
                    })
                },
                onCancel() {
                }
            })
        },
        getCommonUserOpinions() {
            BpmOpinionLibApi.getUserText().then(res => {
                this.commonOpinions=res;
            })
        },
        handleChange(value) {
            this.form.opinion+=value;
            this.opinionShow = false;
            this.$refs.rxtribute.setTributeText(value);
        },
        handleBlur() {
            if (this.value) {
                this.opinion = this.value;
                this.value = undefined;
            }
        },
        //暂存意见
        temporaryOpinion() {
            var id = this.temporaryOpinionObj.id ? this.temporaryOpinionObj.id : "";
            if (this.taskId) {
                var rxtribute = this.$refs.rxtribute;
                let opinion = rxtribute.getOpinion();
                if (opinion){
                    BpmtaskApi.temporaryOpinion(this.taskId, this.form.opinion, id).then(res=>{
                        Util.closeWindow(this, 'ok');
                    });
                }else {
                    this.$message.warning(this.i18n('taskCheck.noNullOpin',"意见不能为空"));
                    return
                }
            }

        },
        //获取暂存意见
        getTemporaryOpinion() {
            if (this.taskId) {
                BpmtaskApi.getTemporaryOpinion(this.taskId).then(res => {
                    if (res) {
                        this.form.opinion = res.opinion;
                        this.$refs.rxtribute.setTributeText(res.opinion);
                        this.temporaryOpinionObj = res;
                    }
                });
            }
        },
        selectBpmInst() {
            var conf = {
                component: BpmMyEvents,
                title: this.i18n('taskCheck.assoProcess','关联流程'),
                curVm: this, widthHeight: ['1024px', '600px']
            };
            var self_ = this;
            Util.open(conf, function (action, relInsts) {
                if (action != 'ok') return;

                var idAry = [];
                for (var i = 0; i < self_.relInsts.length; i++) {
                    var o = self_.relInsts[i];
                    idAry.push(o.id);
                }

                for (var i = 0; i < relInsts.length; i++) {
                    var o = relInsts[i];
                    if (idAry.includes(o.id)) {
                        continue;
                    }
                    self_.relInsts.push(o);
                }
            });
        },

        opinionChange(e){
            if(this.form.opinion && this.form.opinion.length>500){
                this.form.opinion=this.form.opinion.substring(0,500)
                this.$message.warning(this.i18n('taskCheck.opinionSize','意见限500字!'));
            }
        },
        initCheckTypes(){
            if(this.taskConfig.multipleType!='normal' && this.taskConfig.signConfig.options){
                this.checkTypes=this.taskConfig.signConfig.options;
            }
            if(this.taskConfig.multipleType=='normal' && this.taskConfig.showOpinion){
                this.checkTypes=this.taskConfig.options;
            }
        },
        showOpinion(){
            //普通任务节点
            if(this.taskConfig.multipleType=='normal' && this.taskConfig.showOpinion
                && this.taskConfig.options && this.taskConfig.options.length>0){
                return true;
            }
            if(this.taskConfig.multipleType!='normal' && this.taskConfig.signConfig.options){
                return true;
            }
            return false;
        },
        //是否显示下一步执行人。
        canShowNextTask(){
            return !this.taskConfig.switchOptions.includes("shieldExecutePath");
        }
    }
}
</script>
<style scoped>
.bpm-more-common-executors{
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.bpm-more-common-executors-next{
    margin-right: 10px;
}
.bpm-more-common{
    margin-top: 20px;
}
.bpm-more-common >>> .ant-collapse-header{
    background-color: white!important;
}
.opinion-common-add-button{
    border-top: solid 1px #d9d9d9;
    text-align: right;
}
.opinion-common-add-button button{
    margin-right: 15px;
    margin-top: 5px;
}
.opinion-parenthesis-triangle{
    height: 5px;
    width: 0px;
    border: 10px solid;
    border-color: transparent transparent white transparent;
    position: absolute;
    top: -17px;
    right: 36px;
}
.opinion-common-add-triangle{
    height: 5px;
    width: 0px;
    border: 10px solid;
    border-color: transparent transparent white transparent;
    position: absolute;
    top: -35px;
    left: 57px;
}
.opinion-common-add{
    position: absolute;
    bottom: -185px;
    left:0px;
    width: 337px;
    height: 170px;
    background-color: #ffffff;
    box-shadow: 0px 0px 13px 0px
    rgba(6, 0, 1, 0.17);
    border: solid 1px #eeeeee;
    border-radius: 4px;
    z-index: 9999;
    box-sizing: border-box;
}
.opinion-parenthesis-add{
    border-top: solid 1px #d9d9d9;
    height: 35px;
    line-height: 35px;
    padding-left: 12px;
    cursor: pointer;
    color: #444444;
    display: flex;
    align-items: center;
}
.opinion-parenthesis-add i{
    font-size: 18px;
    margin-right: 5px;
}
.opinion-parenthesis-list{
    margin-top: 20px;
}
.opinion-parenthesis-list li{
    color: #444444;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 12px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}
.opinion-parenthesis-list li i{
    margin-right:5px;
    font-size: 18px;
}
.opinion-parenthesis-list li i:hover{
 color:#4285f4
}
.opinion-parenthesis-list li div{
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    padding-left: 5px;
}
.opinion-parenthesis-list li div:hover{
    background-color: #f2f3f6;
    border-radius: 4px;
}
.opinion{
    display: flex;
    color: #444444;
    font-size: 14px;
}

.opinion .ant-radio-group{
    margin-left: 10px;
}

.opinion div:nth-child(1){
    flex: 1;
    color: #303030;
}
.opinion div:nth-child(2){
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.opinion div:nth-child(2) i{
    margin-right: 5px;
    font-size: 17px;
}
.opinion-common{
    position: relative;
}
.opinion-parenthesis{
    position: absolute;
    top: 28px;
    right:0px;
    width: 337px;
    background-color: #ffffff;
    box-shadow: 0px 0px 13px 0px
    rgba(6, 0, 1, 0.17);
    border: solid 1px #eeeeee;
    border-radius: 4px;
    z-index: 9999;
}
</style>